<template>
  <div id="app">
    <!-- 当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。 -->
    <!-- <ul>
      <li v-for="(value, index) in dataObj" :key="index">
        <div
          v-if="Array.isArray(value)"
          v-for="(item, index) in value"
          :key="index"
        >
          {{ item }}
        </div>
        <div v-else>{{ value }}</div>
      </li>
    </ul> -->
    <!-- 解决方案 -->
    <!-- 永远不要把 v-if 和 v-for 同时用在同一个元素上。 -->
    <!-- 请将 v-if 移动至v-for的父元素上-->
    <ul>
      <li v-for="(value, index) in dataObj" :key="index">
        <div v-if="Array.isArray(value)">
          <div v-for="(item, index) in value" :key="index">
            {{ item }}
          </div>
        </div>
        <div v-else>{{ value }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      dataObj: {
        arr: ["apple", "banana", "grape", "orange", "pitaya", "carambola"],
        str: "Hellovue",
        num: 5,
      },
    };
  },
  methods: {},
};
</script>

<style>
</style>
